<template>
	<view>
		  <view class="bg">
		  	<view class="assure">
		  		<view class="sum">
		  			<text>1000</text>
		  		</view>
					<view class="describe">
						<text>保证金(元)</text>
					</view>
		  	</view>
				
				<view class="assure">
					<view class="sum">
						<text style="margin-left: 20px;">1000</text>
					</view>
					<view class="describe">
						<text>违约扣除金额(元)</text>
					</view>
				</view>
		  </view>
			
			<view class="tab-bar">
				<u-tabs :list="list" :is-scroll="false" :current="current" active-color="#c6100e" height="80" bg-color="#f8f8f8" @change="change"></u-tabs>
			</view>
			<!-- 规则说明模块 -->
			<view class="rules" v-if="current == 0">
				<view>
					<text>1.参与拍卖时，必须先缴纳保证金才可以参与；</text>
				</view>
				<view>
					<text>2.预展期：缴纳保证金后，在结拍前均可购买；</text>
				</view>
				<view>
					<text>3.竞拍结束后，未成功竞拍，平台立即解冻保证金，资金原路退回；</text>
				</view>
				<view>
					<text>4.竞拍成功者，在缴纳完拍卖商品的竞拍价格后，平台立即解冻保证金，资金原路退回；</text>
				</view>
				<view>
					<text>5.竞拍成功者若未在付款周期内（7天）支付所有款项，平台扣除之前缴纳的保证金，不予退回。</text>
				</view>
				<view>
					<text>6.如有疑问，请咨询客服。</text>
				</view>
			</view>
			
			<!-- 保证金记录模块 -->
			<view v-if="current == 1">
				<view class="history">
					 <view>
					 	<view class="type">
					 		<text>缴纳</text>
					 	</view>
					 	<view class="way">
					 		<text>书心为画书法专场</text>
					 	</view>
					 </view>
					 
					 <view>
					 	<view class="money">
					 		<text>-1000元</text>
					 	</view>
					 	<view class="time">
					 		<text>2021-12-09 18:20:18</text>
					 	</view>
					 </view>
				</view>
				<view class="history">
					 <view>
					 	<view class="type">
					 		<text>缴纳</text>
					 	</view>
					 	<view class="way">
					 		<text>书心为画书法专场</text>
					 	</view>
					 </view>
					 
					 <view>
					 	<view class="money">
					 		<text>-1000元</text>
					 	</view>
					 	<view class="time">
					 		<text>2021-12-09 18:20:18</text>
					 	</view>
					 </view>
				</view>
				<view class="history">
					 <view>
					 	<view class="type">
					 		<text>缴纳</text>
					 	</view>
					 	<view class="way">
					 		<text>书心为画书法专场</text>
					 	</view>
					 </view>
					 
					 <view>
					 	<view class="money">
					 		<text>-1000元</text>
					 	</view>
					 	<view class="time">
					 		<text>2021-12-09 18:20:18</text>
					 	</view>
					 </view>
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{
						name: '规则说明'
					}, 
					{
						name: '保证金记录'
					}
				],
				current: 0
			}
	},
	methods:{
		change(index) {
		  this.current = index
		 }
		}
	 }
</script>

<style lang="scss" scoped>
	.bg {
		width: 90%;
		margin: 5%;
		height: 340rpx;
		border-radius: 10rpx;
		background: linear-gradient(to bottom,#fd6a68,#c71210);
		display: flex;
		justify-content: space-around;
	}
	
	.assure {
		margin-top: 100rpx;
	}
	
	.assure .sum {
		font-size: 52rpx;
		color: #ffffff;
		font-weight: 700;
	}
	
	.assure .describe {
		font-size: 32rpx;
		color: #ffffff;
	}
	
	.tab-bar {
		width: 90%;
		margin: 5%;
	}
	
	.rules {
		width: 90%;
		margin: 5%;
	}
	
	.rules text {
		line-height: 80rpx;
	}
	
	.history {
		height: 140rpx;
		width: 90%;
		margin: 5%;
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid #939393;
	}
	.history .money {
		text-align: right;
	}
</style>
